 <template>
 	<view class="webViewWrap">
 		<view style="height: var(--status-bar-height);background-color: var(--bg-1);"></view>
 		<view class="header" @click="handleBack">
 			<image style="width: 22px;" mode="widthFix" src="@/static/image/back-icon.png"></image>
 			<text class="backText">{{$t('Page.notify.back')}}</text>
 		</view>
 		<iframe id="show-iframe" v-if="iframeHeight" :src="webviewPath" frameborder="0" :style="{
			width:'100%', 
			height:`${iframeHeight}px`, 
			overflowY:'auto !important'
		}"></iframe>

 		<uni-popup ref="popupRef" type="center" :is-mask-click="false">
 			<view class="popup-cont">
 				<view class="tips">
 					{{ $t('Page.home.qrtcm') }}
 				</view>
 				<view class="btns">
 					<waves class="btn cancel" @onTap="handlePopup('close')">
 						{{ $t('Page.mine.cancel') }}
 					</waves>
 					<waves class="btn confirm" @onTap="confrim">
 						{{ $t('Page.mine.confirm') }}
 					</waves>
 				</view>
 			</view>
 		</uni-popup>
 	</view>
 </template>
 <script>
 	export default {
 		data() {
 			return {
 				webviewPath: '',
 				iframeHeight: 0,
 			};
 		},
 		onLoad(option) {
 			this.webviewPath = option.url
 		},
 		onReady() {
 			let res = uni.getSystemInfoSync();
 			let windowHeight = res.windowHeight,
 				statusBarHeight = res.statusBarHeight;
 			const query = uni.createSelectorQuery().in(this);
 			query.select('.header').boundingClientRect(data => {
 				this.iframeHeight = windowHeight - statusBarHeight - data.height
 			}).exec();
 		},
 		methods: {
 			handleBack() {
 				this.handlePopup('open')
 			},
 			handlePopup(flag) {
 				this.$refs.popupRef[flag]('center')
 			},
 			confrim() {
 				let canNavBack = getCurrentPages();
 				if (canNavBack && canNavBack.length > 1) {
 					uni.switchTab({
 						url: '/pages/tabBar/home/index'
 					})
 				} else {
 					history.back();
 				}
 			},
 		}
 	};
 </script>

 <style lang="scss" scoped>
 	.webViewWrap {
 		width: 100vw;
 		height: 100vh;
 		overflow-y: auto;
 	}

 	.header {
 		display: flex;
 		align-items: center;
 		background-color: var(--bg-1);
 		color: #fff;
 		padding-right: 30rpx;
 		height: 44px;
 		padding-left: 15px;
 		box-sizing: border-box;
 		cursor: pointer;

 		.backText {
 			font-size: 16px;
 			margin-left: 10px;
 		}
 	}

 	.popup-cont {
 		width: calc(100vw - 60px);
 		background: var(--bg-38);
 		opacity: .95;
 		border-radius: 15px;
 		padding: 15px;
 		box-sizing: border-box;
 		opacity: 0.95;
 		display: flex;
 		align-items: center;
 		flex-direction: column;

 		.tips {
 			height: 48px;
 			line-height: 48px;
 			font-size: 17px;
 			font-family: PingFang SC-Bold, PingFang SC;
 			font-weight: bold;
 			color: rgba(255, 255, 255, 0.9);
 			line-height: 24px;
 		}

 		.btns {
 			display: flex;
 			align-items: center;
 			margin-top: 30px;

 			.btn {
 				min-width: 110px;
 				height: 42px;
 				line-height: 42px;
 				text-align: center;
 				border-radius: 100px;
 				font-size: 16px;
 				font-family: PingFang SC-Medium, PingFang SC;
 				box-sizing: border-box;
 				margin-right: 24px;
 				cursor: pointer;

 				&:last-child {
 					margin-right: 0;
 				}

 			}

 			.cancel {
 				border: 2px solid var(--border-color-4);
 				color: var(--color-38);
 				background: var(--bg-51);
 			}

 			.confirm {
 				background: var(--bg-13);
 				box-shadow: inset 0px 4px 4px 0px varBB(--box-shadow-color-1);
 				border-color: transparent;
 				color: var(--color-7);
 				font-weight: 600;
 			}
 		}
 	}
 </style>